<template>
  <div>
    <el-card class="box-card defaultTable">
      <el-table v-loading="loading" :data="d.tableData" style="width: 100%">
        <el-table-column prop="admin_avatar" label="用户头像">
          <template #default="{ row }">
            <Avatar :avatar="String(row.admin_avatar)" :icon-size="50" />
          </template>
        </el-table-column>
        <el-table-column prop="admin_nickname" label="用户名称" />
        <el-table-column prop="price" label="订单价格">
          <template #default="{ row }">
            <div class="price">￥{{ row.price }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <div class="status">
              <img class="price_icon" :src="row.status === '1' ? PriceRed : PriceGreen" alt="" />
              {{ row.status === "1" ? "未支付" : "已支付" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="生成时间" />
        <el-table-column align="right" label="操作">
          <template #default="{ row }">
            <div class="dflex justify-content-end">
              <div class="base-code">
                <img :src="code" alt="" srcset="" @click="onQrCode(row)" />
              </div>
              <!-- <div class="base-del">
                <img :src="del" alt="" srcset="" />
              </div> -->
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="justify-content-end p10_0"
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :currentPage="paginationData.currentPage"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 弹出二维码 -->
    <el-dialog
      destroy-on-close
      class="dialogAdapter"
      style="border-radius: 10px"
      v-model="dialogVisible"
      title="支付订单"
    >
      <div class="f14999">
        <div>支付方式</div>
        <span class="f14333">微信支付</span>
      </div>
      <div class="f14999">
        <div>支付金额</div>
        <span class="f14333"> ￥{{ currentPrice }} </span>
      </div>
      <div id="qrcode" />
      <template #footer>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { APIBillList } from "@/api/apiSetting"
import code from "@/assets/docs/code.svg"
import PriceGreen from "@/assets/docs/price_green.svg"
import PriceRed from "@/assets/docs/price_red.svg"
import Avatar from "@/components/Avatar/index.vue"
import { usePagination } from "@/hooks/usePagination"
import dayjs from "dayjs"
import pubsub from "pubsub-js"
import { onBeforeUnmount, onMounted, reactive, ref, watch } from "vue"
// @ts-ignore
import QRCode from "qrcodejs2-fix"

const loading = ref<boolean>(false)
const dialogVisible = ref<boolean>(false)
const currentPrice = ref<number>(0)
const d = reactive<any>({
  tableData: [],
  paginationData: {
    total: 0,
    currentPage: 1,
    pageSize: 20
  }
})

const { paginationData, handleCurrentChange } = usePagination(d.paginationData)
// 监听分页
watch(
  () => paginationData.currentPage,
  () => {
    initModel()
  }
)

const getQRCode = (url: string) => {
  // 生成二维码
  const qrcode = new QRCode(document.getElementById("qrcode"), {
    text: url,
    width: 228,
    height: 228,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H
  })
}

let UPDATETAGSLLIST = null as any
onMounted(() => {
  UPDATETAGSLLIST = pubsub.subscribe("UPDATETAGSLLIST", () => initModel())
})

onBeforeUnmount(() => {
  pubsub.unsubscribe(UPDATETAGSLLIST)
})
const onQrCode = (item: any) => {
  currentPrice.value = item.price
  dialogVisible.value = true
  setTimeout(() => {
    getQRCode(item.url)
  }, 0)
}

// 初始化
const initModel = async () => {
  loading.value = true
  const params = {
    page: paginationData.currentPage
  }
  const { data, code } = await APIBillList(params)
  if (code !== 200) return
  paginationData.total = data.count
  d.tableData = data.list.map((item: any) => {
    item.createtime = dayjs.unix(item.createtime).format("YYYY-MM-DD HH:mm:ss")
    return item
  })
  loading.value = false
}

onMounted(() => {
  initModel()
})

// const delFn = (p: number) => {
//   const newList = d.tableData.filter((e: any) => e.id !== p)
//   d.tableData = newList
// }
</script>
<style lang="scss" scoped>
.f14999 {
  margin-bottom: 20px;
  text-align: center;
}

.f14333 {
  font-family: "PingFang SC";
  color: #333;
  font-size: 14px;
  line-height: 24px;
}

#qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-card {
  box-shadow: none;
  border: none;

  .base-code {
    // margin-right: 20px;
    cursor: pointer;
  }

  .status {
    .price_icon {
      width: 10px;
      height: 10px;
    }

    /* &-red {
      color: var(--el-color-primary);
    }

    &-green {
      color: #37BB3F;
    } */
  }
}
</style>
